<template>
  <div class="app-container">
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
      <div slot="header" class="mb36">
        <span>报表日期</span>
      </div>
      <div class="flex JCC mb36">
        <el-input style="width: 300px" v-model="date" placeholder="请输入年月" clearable></el-input>
      </div>
    </el-card>

    <div class="flexSB mt30">
      <el-card style="width: 300px" shadow="hover" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>针车报表</span>
        </div>
        <div class="flexSE AIC" style="flex-direction: column; height: 400px">
          <el-button type="primary" size="default" @click="">本场针车产量</el-button>
          <el-button type="primary" size="default" @click="">外包针车产量</el-button>
          <el-button type="primary" size="default" @click="">针车指令单入库明细表</el-button>
        </div>
      </el-card>
      <el-card style="width: 300px" shadow="hover" :body-style="{ padding: '20px' }">
        <div slot="header" class="mb36">
          <span>底仓报表</span>
        </div>
        <div class="flexSE AIC" style="flex-direction: column; height: 400px">
          <el-button type="primary" size="default" @click="">大底(组合)收料</el-button>
          <el-button type="primary" size="default" @click="">鞋垫(面衬)收料</el-button>
          <el-button type="primary" size="default" @click="">中底(组合)收料</el-button>
        </div>
      </el-card>
      <el-card style="width: 300px" shadow="hover" :body-style="{ padding: '20px' }">
        <div slot="header" class="mb36">
          <span>裁配月入库明细</span>
        </div>
        <div class="flexSE AIC" style="flex-direction: column; height: 400px">
          <el-select v-model="dept" placeholder="请输入部门" clearable filterable @change="">
            <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value"> </el-option>
          </el-select>
          <el-button type="primary" size="default" @click="">导出月报表</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'DailyReports'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Find from '@/components/Find/index.vue'
const date = ref('')
const options = ref([
  {
    value: '冲裁'
  },
  {
    value: '手工'
  },
  {
    value: '配套仓'
  }
])
const dept = ref('')
// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312',
    customer: 'jzy',
    checkboxArrange: true
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer'
  },
  {
    label: '品牌',
    prop: 'instruction'
  },
  {
    label: '型体',
    prop: 'shape'
  },
  {
    label: '颜色',
    prop: 'shape'
  },
  {
    label: '楦头',
    prop: 'shape'
  },
  {
    label: '订单数',
    prop: 'shape'
  },
  {
    label: '订单日期',
    prop: 'shape'
  },
  {
    label: '客人交期',
    prop: 'shape'
  },
  {
    label: '主面料采购周期',
    prop: 'shape'
  },
  {
    label: '大底采购周期',
    prop: 'shape'
  },
  {
    label: '大底开模周期',
    prop: 'shape'
  },
  {
    label: '外协工艺周期',
    prop: 'shape'
  },
  {
    label: '针车日人均产能',
    prop: 'shape'
  },
  {
    label: '成型日人均产能',
    prop: 'shape'
  }
])

// 分页器
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(658)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped></style>
